<template>
  <div class="proportion-of-alarm-types">
    <div class="number-block">
      <div class="number-item">
        <div class="value">27%↑</div>
        <div class="text">案件处置效率上升</div>
      </div>
      <div class="number-item">
        <div class="value">35%↓</div>
        <div class="text">治安警情数下降</div>
      </div>
      <div class="number-item">
        <div class="value">99.5%</div>
        <div class="text">群众满意度</div>
      </div>
    </div>
    <div class="time-line-block">
      <div class="time-line-item" v-for="(item, index) in steps" :key="index">
        <div class="time">{{item.time}}</div>
        <div class="line-block">
          <div class="point">
            <div class="roundness"></div>
          </div>
          <div class="line"></div>
        </div>
        <div class="info-block">
          <div class="info-title">{{item.title}}</div>
          <div class="info-desc" :title="item.content">{{item.content}}</div>
          <div :style="{background:item.statusColor}" class="status-point"></div>
          <div class="status-text">{{item.statusText}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ProportionOfAlarmTypes",
  data(){
    return{
      steps: [
        {
          time: "06-16 15:30:45",
          title: "民事调解",
          content: "王彦俊称在，市政广场南头（广场），因广场上的碰碰车（游乐设施）把广场上的一个飞天雕塑损坏发生纠纷。",
          statusText: "已处警",
          statusColor: "#52C41A"
        },
        {
          time: "06-15 22:20:30",
          title: "救助服务",
          content: "肃州区市政广场东面红绿灯(道路），躺着一名醉酒人需要求助。",
          statusText: "已处警",
          statusColor: "#52C41A"
        },
        {
          time: "06-08 20:15:22",
          title: "移交新城派出所",
          content: "白雪冬报称在市政广场水池边，广场巡逻人员与群众发生纠纷，请求处理。",
          statusText: "已处警",
          statusColor: "#52C41A"
        },
        {
          time: "07-24 16:45:10",
          title: "民事调解",
          content: "张炜鹏报称：停放在市政府东面，一辆甘FFB723越野车疑似被人为刮蹭，请求处理。",
          statusText: "已处警",
          statusColor: "#52C41A"
        },
        {
          time: "07-17 13:30:15",
          title: "救助服务",
          content: "肃州区市政广场东南角公厕，姜润莲报称其手机掉入公厕，请求帮助。",
          statusText: "已处警",
          statusColor: "#52C41A"
        },
        {
          time: "07-11 10:20:33",
          title: "移交新城派出所",
          content: "市政广场中间花坛，鲁凯报称其的手机忘记未拿丢失了，请求民警帮助。",
          statusText: "已处警",
          statusColor: "#52C41A"
        },
        {
          time: "07-09 17:40:25",
          title: "民事调解",
          content: "杨海霞报在市政广场东边发现1名老太太迷路，无法回家，请求处理。",
          statusText: "已处警",
          statusColor: "#52C41A"
        },
        {
          time: "07-06 15:30:18",
          title: "救助服务",
          content: "郭俊报在市政广场西边篮球架发现1名穿绿色羽绒服，蓝色牛仔裤3岁小男孩，请求民警帮助。",
          statusText: "已处警",
          statusColor: "#52C41A"
        },
        {
          time: "07-05 14:25:40",
          title: "移交新城派出所",
          content: "市政广场工作人员报称发现广场种植花草的花箱找不到，要求出警处理。",
          statusText: "已处警",
          statusColor: "#52C41A"
        }
      ]
    }
  },
  created() {
    // 按时间倒序排序
    this.steps.sort((a, b) => {
      const timeA = new Date(`2024-${a.time}`);
      const timeB = new Date(`2024-${b.time}`);
      return timeB - timeA;
    });
  },
  methods: {
    generateRandomSteps() {
      // 设置日期范围为18-20日
      const startDate = new Date('2024-04-18');
      const endDate = new Date('2024-04-20');

      const titles = ['民事调解', '救助服务', '移交新城派出所'];
      const contents = [
        '王彦俊称在，市政广场南头（广场），因广场上的碰碰车（游乐设施）把广场上的一个飞天雕塑损坏发生纠纷。',
        '肃州区市政广场东面红绿灯(道路），躺着一名醉酒人需要求助。',
        '白雪冬报称在市政广场水池边，广场巡逻人员与群众发生纠纷，请求处理。',
        '张炜鹏报称：停放在市政府东面，一辆甘FFB723越野车疑似被人为刮蹭，请求处理。',
        '肃州区市政广场东南角公厕，姜润莲报称其手机掉入公厕，请求帮助。',
        '市政广场中间花坛，鲁凯报称其的手机忘记未拿丢失了，请求民警帮助。',
        '杨海霞报在市政广场东边发现1名老太太迷路，无法回家，请求处理。',
        '郭俊报在市政广场西边篮球架发现1名穿绿色羽绒服，蓝色牛仔裤3岁小男孩，请求民警帮助。',
        '市政广场工作人员报称发现广场种植花草的花箱找不到，要求出警处理。',
        '刘春慧报称：其在市政广场西路路边，看见有人现场发生打架。',
        '市政府1楼有10人上访（报警人不清楚原因）围堵门口不离开，请求出警。',
        '张菊香报在市政广场东边停放的三轮电动车被盗，请求处理。',
        '市政府西辅楼有3名人员上访，请求处理。',
        '王成报称在市政府东侧1楼门口，有一人上访，请求处理。'
      ];

      // 打乱内容数组
      const shuffledContents = [...contents].sort(() => Math.random() - 0.5);
      const shuffledTitles = [...titles].sort(() => Math.random() - 0.5);

      const steps = [];
      for (let i = 0; i < Math.min(15, contents.length); i++) {
        // 在18-20日之间随机选择一天
        const randomDay = new Date(startDate);
        randomDay.setDate(startDate.getDate() + Math.floor(Math.random() * 3));
        randomDay.setHours(Math.floor(Math.random() * 24));
        randomDay.setMinutes(Math.floor(Math.random() * 60));
        randomDay.setSeconds(Math.floor(Math.random() * 60));

        const timeStr = randomDay.toLocaleString('zh-CN', {
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        }).replace(/\//g, '-');

        steps.push({
          time: timeStr,
          content: shuffledContents[i],
          title: shuffledTitles[i % titles.length],
          statusText: '已处警',
          statusColor: '#52C41A'
        });
      }

      // 按时间倒序排序
      this.steps = steps.sort((a, b) => {
        const timeA = new Date(`2024-${a.time}`);
        const timeB = new Date(`2024-${b.time}`);
        return timeB - timeA;
      });
    }
  }
}
</script>
<style scoped lang="scss">
.proportion-of-alarm-types{
  width: 100%;
  height: 100%;
  padding:10px 20px;
  .number-block{
    width: 100%;
    display: flex;
    justify-content: space-between;
    .number-item{
      width: calc(100%/3 - 10px);
      height: 120px;
      background: rgba(34, 223, 233, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .value{
        font-family: 冷酷体;
        font-size: 28px;
        margin-bottom: 10px;
        color: $fontColorMain;
      }
      .text{
        color: #fff;
      }
    }
  }
  .time-line-block{
    margin-top: 20px;
    height: calc(100% - 140px);
    width: 100%;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: rgba(0,198,255,.3);
    }
    &::-webkit-scrollbar-track{
      border-radius: 3px;
      background: rgba(0,24,48,.3);
    }
    .time-line-item{
      width: 100%;
      height: 75px;
      display: flex;
      .time{
        width: 80px;
        color: #fff;
        font-size: 14px;
      }
      .line-block{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 10px;
        .point{
          width: 16.5px;
          height: 16.5px;
          border-radius: 50%;
          background: #043E66;
          display: flex;
          align-items: center;
          justify-content: center;
          .roundness{
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: $fontColorSecondary;
          }
        }
        .line{
          width: 1px;
          height: calc(100% - 16px);
          background: $fontColorSecondary;
        }
      }
      &:last-child{
        .line{
          background: transparent;
        }
      }
      .info-block{
        width: calc(100% - 105px - 36.5px);
        height: calc(100% - 20px);
        border-radius: 8px;
        background: rgba(4, 62, 102, 0.3);
        backdrop-filter: blur(5px);
        padding: 0 20px;
        display: flex;
        align-items: center;
        .info-title{
          font-weight: bold;
          color: $fontColorSecondary;
          margin-right: 10px;
          width: 64px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .info-desc{
          color: #fff;
          font-size: 14px;
          width: calc(100% - 74px - 30px - 42px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .status-point{
          border-radius: 50%;
          width: 10px;
          height: 10px;
          margin:0 10px;
        }
        .status-text{
          color: #fff;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
